<template>
  <div class="content">
    <el-table
            v-if="order.length!==0"
            :data="order"
            border
            style="width: 100%">
      <el-table-column
              prop="storeName"
              label="商家名称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="commodityName"
              label="商品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="commodityPrice"
              label="商品价格"
              width="100"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="商品图片">
        　　<template slot-scope="scope">
        　　　　<img :src="'http://localhost:7777/'+scope.row.commodityImg" width="100px" height="100px" class="head_pic"/>
        　　</template>
      </el-table-column>
      <el-table-column
              prop="specs"
              label="商品规格"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              label="订单状态"
              width="100"
              show-overflow-tooltip>
        <template slot-scope="scope">
          　　<span>{{scope.row.status | convert}}</span>　　
          </template>
      </el-table-column>
      <el-table-column
              prop="updateTime"
              label="加入时间"
              show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     size="small"
                     v-if="scope.row.status===3"
                     disabled>等待发货
          </el-button>
          <el-button type="text"
                     size="small"
                     v-if="scope.row.status===5"
                     icon="el-icon-ship"
                     @click="receiving(scope)">收货
          </el-button>

          <el-button type="text"
                     size="small"
                     v-if="scope.row.status===6"
                     icon="el-icon-position"
                     @click="evaluate(scope)">评价
          </el-button>
          <el-button type="text"
                     size="small"
                     v-if="scope.row.status===7"
                     disabled>欢迎下次购买
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
    <div class="placeholder" >当前并无订单！快去下单吧~~</div>
    </div>
    <el-dialog
            title="评论"
            :visible.sync="evaluateVisible"
            :close-on-click-modal="false">
      <avue-form v-model="evaluateForm" :option="evaluateOption" @submit="evaluateSubmit"/>
    </el-dialog>
  </div>

</template>

<script>
  import { fil_status } from "@/util/filterstaticdata";
  import {getToken} from "@/util/auth";
  export default {
    name: 'Order',
    data () {
      return {
        evaluateVisible:false,
        evaluateForm:{},
        evaluateOption: {
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          column: [
            {
              label: "评价图片",
              prop: "img",
              type: 'upload',
              span: 24,
              dataType: "string",
              propsHttp: {
                res: 'data'
              },
              listType: 'picture-card',
              action: '/api/pxx_commodity/commodity/uploadAvue',
            },
            {
              label: "评分",
              prop: "score",
              type: 'rate',
              showText: true,
              texts: ['极差', '失望', '一般', '满意', '非常满意'],
              rules: [{
                required: true,
                message: "请输入评分",
                trigger: "blur"
              }]
            },
            {
              label: "评价内容",
              prop: "content",
              type:"textarea",
              maxlength:30,
              span: 24,
              rules: [{
                required: true,
                message: "请输入评价内容",
                trigger: "blur"
              }]
            },
          ]
        },
        order: [],
        cart: [],
        userData:''
      }
    },
    filters: {
      convert (val) {
        return fil_status(val);
      }
    },
    mounted () {
      this.orderLsit();
    },
    methods: {
      //评论
      evaluate(scope){
        this.evaluateVisible=true
        this.evaluateForm ={
          storeId:scope.row.storeId,
          cartId:scope.row.id,
          commodityId:scope.row.commodityId
        }
      },
      //发布评论
      evaluateSubmit(scope,done,loading){
        var user = JSON.parse(this.userData)
        done();
        var img = scope.img;
        img =  img.split(',');
        var newImg = '';
        for (let i = 0; i < img.length; i++) {
          newImg+=img[i].replace("http://localhost:7777",'')+","
        }
        scope.img = newImg.slice(0,newImg.length-1)
        scope.updateUser = user.id
        scope.createUser = user.id
        this.$http({
          method:"post",
          url:"/api/pxx-evaluate/evaluate/submit",
          data: scope,
          headers: {'Content-Type': 'application/json'}
        }).then(res =>{
          this.orderLsit();
          this.$message({
            type: "success",
            message: "评价成功!"
          });
        });
        var row = {
          id:scope.cartId,
          status: 7
        }
        this.$http({
          method:"post",
          url:"/api/pxx-cart/cart/update",
          data: row,
          headers: {'Content-Type': 'application/json'}
        }).then(res =>{
        });
        this.evaluateVisible=false
        this.orderLsit();
      },

      //点击收货
      receiving(scope){
        const row = {
          id:scope.row.id,
          status: 6
        };
        this.$http({
          method:"post",
          url:"/api/pxx-cart/cart/update",
          data: row,
          headers: {'Content-Type': 'application/json'}
        }).then(res =>{
          this.orderLsit();
          this.$message({
            type: "success",
            message: "收货成功!"
          });
        });
      },
      //订单列表
      orderLsit(){
        this.userData = getToken()
        if (this.userData===undefined){
          this.$message.error('你还未登录!');
          this.$router.push({ path: 'UserInfo'})
          return
        }
        var id = JSON.parse(this.userData).id
        this.$http({
          method:"get",
          url:"/api/pxx-cart/cart/selectOrderList",
          params: {
            createUser: id
          }
        }).then(res =>{
          this.order = res.data.data.records
        });
      }
    }
  }
</script>

<style scoped>
  .content {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .one-line {
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .table-goods {
    width: 100%;
    margin-top: 15px;
    color: #555;
    table-layout: fixed;
    border-collapse: collapse;
    user-select: none;
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:last-child {
    border-bottom: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(149, 191, 103, .1);
  }
  .table-goods th,
  .table-goods td {
    text-align: left;
    font-size: 16px;
    padding-left: 12px;
  }
  .table-goods th {
    line-height: 52px;
  }
  .table-goods td {
    line-height: 120px;
  }
  .thumbnail-goods {
    width: 100px;
    vertical-align: middle;
  }
  .btn-text {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
  .placeholder {
    color: #555;
    line-height: 80px;
    font-size: 24px;
  }
</style>
